import React, { Component, PropTypes } from 'react';
import action from '../../../Action/Index';
import Loading from '../../Common/Loading/Index';
import GetSize from '../../../Utils/GetSize';

class News extends Component {

    constructor(props) {
        super(props)
        this.state = {
            isFetching: false,
            limit: props.limit,
            loadMsg: "加载更多",
            scrollT: 0
        }
        this.onLoadMore = () => {
            this.redayDOM()
        }
        this.handleClick = (tab) => {
            let {scrollT} = GetSize()
            const {selectedTab, dispatch} = props;
            dispatch(action.recordScrollT(selectedTab, scrollT))
            dispatch(action.selectTab(tab))

            const ua = navigator.userAgent;
            if (ua.indexOf('Mobile') === -1) {
                if (scrollT >= 64) {
                    dispatch(recordScrollT(tab, 64))
                    this.setState({
                        scrollT: 64
                    })
                } else {
                    dispatch(recordScrollT(tab, scrollT))
                    this.setState({
                        scrollT: scrollT
                    })
                }
            }

        }
    }
    redayDOM() {
        let { selectedTab, newstotals, dispatch} = this.props;
        this.loadMore();
        if (!this.state.isFetching) {
            dispatch(action.fetchNews(selectedTab, 0, this.state.limit));
        }
    }
    loadMore() {
        let { selectedTab, newsload, limit, newstotals, dispatch} = this.props;
        if (!newsload.length || newstotals < limit) {
            this.setState({
                isFetching: true,
                loadMsg: "没有了"
            })
        } else {
            // dispatch(action.requestNews(selectedTab));
            this.setState({
                isFetching: false,
                loadMsg: "加载更多"
            })
        }
        this.state.limit = limit + 5
    }

    componentWillReceiveProps(newProps) {
        let { selectedTab, newsload, scrollT, dispatch} = newProps;
        // 去除刷新时记住的滚动条位置
        if (newsload.length === 0 && this.props.scrollT === 0) {
            window.scrollTo(0, 0)
        }
        if (!this.state.isFetching && newsload.length === 0) {
            dispatch(action.fetchNews(selectedTab));
        }

        if (selectedTab !== this.props.selectedTab) {
            if (scrollT) {
                window.scrollTo(0, scrollT)
            }
        }
    }
    render() {
        const {newsload, isFetching} = this.props;
        // console.log(isFetching);
        return (
            <section>
                <Loading {...this.props} />
                <div className="servic-render servic-render__2">
                    <div className="render-tit">
                        热门头条
					</div>
                    <ul className="mui-table-view mui-table-view-border render-hot-table" id="J_hotLines">
                        {
                            newsload.map((item, index) => {
                                return <ListItem key={item.id} handle={this.handleClick} {...item} />
                            })
                        }
                    </ul>
                    <div className="render-more" onClick={this.onLoadMore}>{this.state.loadMsg}</div>
                </div>
            </section>
        );
    }
    componentDidMount() {
        let { selectedTab, limit, scrollT, dispatch} = this.props;
        if (limit === 0) {
            dispatch(action.fetchNews(selectedTab));
        }
        if (scrollT) {
            window.scrollTo(0, scrollT);
        }
    }
    componentDidUpdate() {
        let {windowH, contentH, scrollT} = GetSize();
        if (scrollT === 0 && this.state.scrollT > 0) {
            window.scrollTo(0, this.state.scrollT)
        }
    }
    componentWillUnmount() {
        let {scrollT} = GetSize()
        const {selectedTab, dispatch} = this.props;
        dispatch(action.recordScrollT(selectedTab, scrollT));
        // 必须解绑事件，否则当组件再次被加载时，该事件会监听两个组件
        window.onscroll = null;
    }
}

class ListItem extends Component {
    constructor(props) {
        super(props)
        this.handle = () => {
            let {url, picUrl, title, handle} = props;
            handle("home");
        }
    }

    render() {
        const {url, picUrl, title} = this.props;

        return (
            <li className="mui-table-view-cell mui-media render-hot-cell" onClick={this.handle}>
                <a href="javascript:;" data-url={url}>
                    <img className="mui-media-object mui-pull-left hot__img" src={picUrl} />
                    <div className="mui-media-body hot-entry clearfix">
                        <h1 className="entry__name mui-ellipsis-2">[&nbsp;{title}'&nbsp;]</h1>
                        <p className="entry__text mui-ellipsis">{title}</p>
                        <span className="entry__btn" href="javascript:;">详情介绍<b>></b></span>
                    </div>
                </a>
            </li>
        );
    }
}

export default News;